
<template>
    <div class="common_page">
        <div class="main_content" ref="mainContent">
            <el-card class="main-card" shadow="never">
                <el-form :model="searchData" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom: -20px">
                    <el-form-item label="计划编号" prop="number">
                        <el-input placeholder="请输入内容" v-model="searchData.number"></el-input>
                    </el-form-item>
                    <el-form-item label="计划名称" prop="name">
                        <el-input placeholder="请输入内容" v-model="searchData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="客户名称" prop="client">
                        <el-input placeholder="请输入内容" v-model="searchData.client"></el-input>
                    </el-form-item>
                    <el-form-item label="负责人" prop="principal">
                        <el-input placeholder="请输入内容" v-model="searchData.principal"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="telephone">
                        <el-input placeholder="请输入内容" v-model="searchData.telephone"></el-input>
                    </el-form-item>
                    <el-form-item label="交货时间" prop="date">
                        <el-date-picker v-model="searchData.date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="" prop="templateNumber">
                        <el-button v-hasPermi="['productManage/productionSchedule:query']" type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
                    </el-form-item>
                </el-form>
                <div class="card-toolbar mb8 flex-between" style="margin-top: 20px; width: 100%">
                    <el-button v-hasPermi="['productManage/productionSchedule:add']" type="primary" icon="el-icon-plus" size="mini" @click="addDialog">新增</el-button>
                    <div>
                        <el-tooltip class="item" effect="dark" content="重置" placement="top">
                            <el-button size="mini" circle icon="el-icon-refresh" v-hasPermi="['productManage/productionSchedule:query']" @click="resetFields" />
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="导出" placement="top">
                            <el-button size="mini" circle icon="el-icon-download" v-hasPermi="['productManage/productionSchedule:export']" @click="handleExport" />
                        </el-tooltip>
                    </div>
                </div>

                <div class="page_content" style="width: 100%">
                    <div class="page_content_bottom">
                        <sysTable
                            :data="setTableData"
                            :columns="setTableColumns"
                            :curr-page="searchData.currPage"
                            :total-page="pageTotal"
                            :page-size="searchData.pageSize"
                            @sizeChange="sizeChange"
                            @currentChange="currentChange"
                        >
                            <template #state="scope">
                                <div :class="jumpClass(scope.scope.row.state)">{{ jumpState(scope.scope.row.state) }}</div>
                            </template>
                            <template #rateOfProgress="scope">
                                <el-progress :text-inside="true" color="#91c7fd" :stroke-width="28" text-color="#7f7f7f" :percentage="scope.scope.row.rateOfProgress"></el-progress>
                            </template>
                            <template #operation="scope">
                                <el-button v-hasPermi="['productManage/productionSchedule:edit']" size="small" type="primary" plain style="padding: 5px" icon="el-icon-edit" @click="editDialog(scope.scope.row)">
                                    编辑
                                </el-button>
                                <el-button v-hasPermi="['productManage/productionSchedule:detail']" size="small" type="primary" plain style="padding: 5px" icon="el-icon-view" @click="showDetail(scope.scope.row)">
                                    详情
                                </el-button>
                            </template>
                        </sysTable>
                    </div>
                </div>
            </el-card>
            <el-dialog :title="addOrEditTitle" :visible.sync="addOrEditDialog" width="1140px" append-to-body>
                <div class="add_dialog_top">
                    <el-form ref="form" :model="formData" label-width="100px">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="客户名称:" prop="clientName">
                                    <el-input v-model="formData.clientName" placeholder="请输入" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="计划编号:" prop="planNumber">
                                    <el-input v-model="formData.planNumber" placeholder="请输入" style="width: 220px" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="计划名称:" prop="planName">
                                    <el-input v-model="formData.planName" placeholder="请输入" style="width: 220px" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="订单编号:" prop="orderNumber">
                                    <el-input v-model="formData.orderNumber" @change="orderChange" placeholder="请输入" style="width: 220px" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="负责人:" prop="principal">
                                    <el-input v-model="formData.principal" placeholder="请输入" style="width: 220px" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="联系电话:" prop="telephone">
                                    <el-input v-model="formData.telephone" placeholder="请输入" style="width: 220px" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="交货日期:" prop="delivery">
                                    <el-date-picker v-model="formData.delivery" type="date" style="width: 220px" placeholder="选择日期"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="add_dialog_bottomTitle">生产批次</div>
                <div class="add_dialog_bottom">
                    <el-form ref="form" :model="formData" label-width="80px">
                        <div class="add_dialog_bottom_data" v-for="(item, index) in formData.sectionBatchedBodies" :key="index">
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="批次号:" label-width="100px" prop="batchNumber">
                                        <el-input v-model="item.batchNumber" placeholder="请输入" style="width: 240px" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="选择区域:" prop="batchShopId">
                                        <el-select v-model="item.batchShopId" style="width: 240px" clearable placeholder="请选择">
                                            <el-option v-for="item in problemLists" :key="item.count" :label="item.date" :value="item.count" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="日期:" prop="price">
                                        <el-date-picker
                                            v-model="item.date"
                                            type="daterange"
                                            style="width: 240px"
                                            format="yyyy-MM-dd"
                                            value-format="yyyy-MM-dd"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                        ></el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div class="bottom_segment" v-for="(ite, inx) in item.sectionList" :key="inx">
                                <el-row>
                                    <el-col :span="8">
                                        <el-form-item label="分段号:" label-width="80px" prop="sectionNumber">
                                            <el-input v-model="ite.sectionNumber" placeholder="请输入单位" style="width: 240px" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="选择区域:" prop="sectionShopId">
                                            <el-select v-model="ite.sectionShopId" style="width: 240px" clearable placeholder="请选择">
                                                <el-option v-for="item in problemLists" :key="item.count" :label="item.date" :value="item.count" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="日期:" prop="price">
                                            <el-date-picker
                                                v-model="ite.date"
                                                type="daterange"
                                                style="width: 240px"
                                                format="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd"
                                                range-separator="至"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                            ></el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-form>
                    <div v-if="totalPage > 0" class="page_wrapper">
                        <el-pagination
                            :page-size="editDialogInfo.pageSize"
                            :page-sizes="[4, 10, 20]"
                            layout="prev, pager, next,sizes, jumper"
                            :total="totalPage"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                    </div>
                </div>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitForm">提 交</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { getSchedulingList, getBitchById, addScheduling, editScheduling } from '../api/product/index';
import { getAllWorkShop } from '../../energy/api/energy/energyTotalAnalysis';
import sysTable from '../components/SysTable';
export default {
    name: 'equipmentEnergy',
    components: {
        sysTable,
    },
    data() {
        return {
            searchData: {
                number: '',
                name: '',
                client: '',
                principal: '',
                telephone: '',
                date: '',
                pageSize: 10,
                currPage: 1,
            },
            editDialogInfo: {
                currPage: 1,
                pageSize: 10,
                number: '',
            },
            totalPage: 0,
            setTableData: [],
            pageTotal: 0,
            buildList: [
                {
                    buildName: '待处理',
                    buildId: 1,
                },
                {
                    buildName: '生产中',
                    buildId: 2,
                },
                {
                    buildName: '已完成',
                    buildId: 3,
                },
            ],
            problemLists: [],
            setTableColumns: [
                {
                    label: '排程计划编号',
                    prop: 'number',
                    minWidth: '180',
                    align: 'center',
                    fixed: 'left',
                    showOverflowTooltip: true,
                },
                {
                    label: '计划名称',
                    prop: 'planName',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '订单编号',
                    prop: 'orderNumber',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '客户名称',
                    prop: 'clientName',
                    width: '200',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '交货日期',
                    prop: 'delivery',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '负责人',
                    prop: 'principal',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '联系电话',
                    prop: 'telephone',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '状态',
                    prop: 'state',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },

                {
                    label: '进度',
                    prop: 'rateOfProgress',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '操作',
                    prop: 'operation',
                    minWidth: '180',
                    fixed: 'right',
                    align: 'center',
                },
            ],
            buttonLoading: false,
            addOrEditTitle: '新增',
            formData: {
                clientName: '',
                planNumber: '',
                planName: '',
                orderNumber: '',
                principal: '',
                telephone: '',
                delivery: '',
                sectionBatchedBodies: [],
            },
            addOrEditDialog: false,
            productBatchList: [
                {
                    showMore: false,
                },
            ],
        };
    },
    mounted() {
        this.getPageList();
        this.getAllWorkShop();
    },
    methods: {
        search() {
            this.buttonLoading = true;
            this.getPageList();
        },
        resetFields() {
            this.searchData = {
                number: '',
                name: '',
                client: '',
                principal: '',
                telephone: '',
                date: '',
                pageSize: 10,
                currPage: 1,
            };
            this.search();
        },
        sizeChange(val) {
            this.searchData.pageSize = val;
            this.getPageList();
        },
        currentChange(val) {
            this.searchData.currPage = val;
            this.getPageList();
        },
        getPageList() {
            getSchedulingList(this.searchData)
                .then((res) => {
                    this.setTableData = res.data.list;
                    this.pageTotal = res.data.total || 0;
                })
                .finally(() => {
                    this.buttonLoading = false;
                });
        },
        getAllWorkShop() {
            getAllWorkShop().then((res) => {
                if (res.code == 200) {
                    this.problemLists = res.data || [];
                }
            });
        },
        handleExport() {
            this.buttonLoading = true;
            var datas = {
                number: this.searchData.number,
                name: this.searchData.name,
                client: this.searchData.client,
                principal: this.searchData.principal,
                telephone: this.searchData.telephone,
                date: this.searchData.date,
                pageSize: '',
                currPage: '',
            };
            const obj = JSON.parse(JSON.stringify(datas));
            this.download(
                'production/schedulesByReport',
                {
                    ...obj,
                },
                '生产排程记录.xlsx'
            );
            this.buttonLoading = false;
            // exportBuild(obj).then(res=> {
            //   const fileName = '设备能源监控记录.xlsx'
            //   saveExcel(res.data, fileName)
            // })
        },
        delOne(val) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!',
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    });
                });
        },
        editDialog(val) {
            this.formData = JSON.parse(JSON.stringify(val));
            this.addOrEditTitle = '编辑';
            this.editDialogInfo.number = val.orderNumber;
            this.editDialogInfo.currPage = 1;
            getBitchById(this.editDialogInfo).then((res) => {
                res.data.list.map((item) => {
                    if (item.batchBeginDate) {
                        item.date = [item.batchBeginDate, item.batchEndDate];
                    }
                    item.batchShopId = item.batchWorkshop ? item.batchWorkshop - 0 : '';
                    item.sectionList.map((ite) => {
                        if (ite.sectionBeginDate) {
                            ite.date = [ite.sectionBeginDate, ite.sectionEndDate];
                        }
                        ite.sectionShopId = item.sectionWorkshop ? item.sectionWorkshop - 0 : '';
                    });
                });
                this.formData.sectionBatchedBodies = res.data.list || [];

                this.pageTotal = res.data.total || 0;
                this.addOrEditDialog = true;
            });
        },
        orderChange(val) {
            this.editDialogInfo.number = val;
            this.editDialogInfo.currPage = 1;
            this.getBitchById();
        },
        handleSizeChange(val) {
            this.editDialogInfo.pageSize = val;
            this.getBitchById();
        },
        handleCurrentChange(val) {
            this.editDialogInfo.currPage = val;
            this.getBitchById();
        },
        getBitchById() {
            getBitchById(this.editDialogInfo).then((res) => {
                this.formData.sectionBatchedBodies = res.data.list || [];
                this.pageTotal = res.data.total || 0;
            });
        },
        addDialog() {
            this.addOrEditTitle = '新增';
            this.addOrEditDialog = true;
        },
        showDetail(val) {
            this.$router.push({
                path: '/product/productionSchedule/detail',
                query: {
                    userId: val.number,
                },
            });
        },
        submitForm() {
            console.log(this.formData, '3333');
            this.formData.sectionBatchedBodies.map((item) => {
                if (item.date && item.date.length > 0) {
                    item.batchBeginDate = item.date[0];
                    item.batchEndDate = item.date[1];
                }
                item.sectionList.map((ite) => {
                    if (ite.date && ite.date.length > 0) {
                        ite.sectionBeginDate = ite.date[0];
                        ite.sectionEndDate = ite.date[1];
                    }
                });
            });
            if (this.addOrEditTitle == '新增') {
                addScheduling(this.formData).then((res) => {
                    this.cancel();
                    this.searchData.currPage = 1;
                    this.getPageList();
                });
            } else {
                editScheduling(this.formData).then((res) => {
                    this.cancel();
                    this.searchData.currPage = 1;
                    this.getPageList();
                });
            }
        },
        cancel() {
            this.addOrEditDialog = false;
            this.formData = {
                clientName: '',
                planNumber: '',
                planName: '',
                orderNumber: '',
                principal: '',
                telephone: '',
                delivery: '',
                sectionBatchedBodies: [],
            };
        },
        changeStatus(item) {
            item.showMore = !item.showMore;
        },
        jumpState(val) {
            switch (val) {
                case 1:
                    return '待处理';
                case 2:
                    return '生产中';
                case 3:
                    return '已完成';
                default:
                    return '-';
            }
        },
        jumpClass(val) {
            switch (val) {
                case 1:
                    return 'waits';
                case 2:
                    return 'processs';
                case 3:
                    return 'completes';
                default:
                    return '-';
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.common_page {
    height: 100%;
    width: 100%;
    background: #f3f4f5;
    overflow: auto;
}
.main_content {
    padding: 16px 20px;
}
::v-deep.el-card {
    border-radius: 8px;
}
.page_content {
    background: #fff;
    padding-bottom: 30px;
    box-sizing: border-box;
    padding: 20px 20px 30px 20px;
    border-radius: 8px;
    .page_content_head {
        display: flex;
    }
}
.main_content_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .main_content_top_box {
        width: 13%;
        margin-right: 1.5%;
        height: 104px;
        background: #fff;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.02), 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
        border-radius: 8px 8px 8px 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .top_box_head {
            color: #666;
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 4px;
        }
        .top_box_content {
            color: #333;
            font-size: 14px;
            // line-height: 30px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            .top_box_content_num {
                font-size: 26px;
                font-weight: bold;
                line-height: 30px;
            }
            .top_box_content_unit {
                line-height: 22px;
            }
        }
        .top_box_red {
            color: #ff4c4d;
        }
        .top_box_green {
            color: #00b24a;
        }
    }
    .main_content_top_box:last-of-type {
        margin-right: 0px;
    }
}
::v-deep.sys_table {
    .tableHeaderRow {
        cursor: pointer;
        .tableHeaderCell:active {
            opacity: 0.6;
        }
        .tableHeaderCell:last-of-type:active {
            opacity: 1;
        }
        .tableHeaderCell:first-of-type:active {
            opacity: 1;
        }
        .tableHeaderCell:last-of-type {
            cursor: default;
        }
        .tableHeaderCell:first-of-type {
            cursor: default;
        }
    }
}
.ope_btn {
    width: 44px;
    height: 28px;
    line-height: 28px;
    color: #3399ff;
    font-size: 14px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgba(0, 85, 255, 0.5);
    padding: 0px;
}
.del_btn {
    width: 44px;
    height: 28px;
    background: #ffffff;
    line-height: 28px;
    color: #ff4c4d;
    font-size: 14px;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid rgba(255, 76, 77, 0.5);
    padding: 0px;
}
::v-deep.el-form {
    .el-form-item {
        .el-form-item__label {
            // text-align: left;
            color: #666;
            font-size: 14px;
            font-weight: 400;
        }
    }
}
::v-deep .el-dialog {
    .el-dialog__body {
        padding: 24px;
    }
}
.add_dialog_top {
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    padding: 16px;
}
.add_dialog_bottomTitle {
    color: #4a4a4a;
    font-size: 16px;
    line-height: 24px;
    margin: 20px 0;
    font-weight: 600;
}
.add_dialog_addBtn {
    height: 52px;
    background: rgba(51, 153, 255, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
}
.add_dialog_bottom {
    .add_dialog_bottom_data {
        .bottom_segment {
            padding-left: 20px;
            border-left: 1px solid #ccc;
            margin-bottom: 20px;
            ::v-deep.el-form-item:last-of-type {
                margin-bottom: 0px;
            }
        }
    }
}

.processs {
    width: 58px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: rgba(255, 119, 51, 0.1);
    border-radius: 4px 4px 4px 4px;
    color: #ff7733;
    font-size: 14px;
    margin: 0 auto;
}

.waits {
    width: 58px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: rgba(51, 153, 255, 0.1);
    border-radius: 4px 4px 4px 4px;
    color: #3399ff;
    font-size: 14px;
    margin: 0 auto;
}

.completes {
    width: 58px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: rgba(0, 178, 74, 0.1);
    border-radius: 4px 4px 4px 4px;
    color: #00b24a;
    font-size: 14px;
    margin: 0 auto;
}
</style>
